<script setup>
import { ref, onMounted } from 'vue'
import { refundPageService } from '@/api/order'
import { useRouter } from 'vue-router'

// 路由
const router = useRouter()

// 搜索表单数据
const search = ref({});

// 表格数据
const tableData = ref([]);

// 申请时间日期选择器数据
const applyTimeRange = ref([])

// 处理时间日期选择器数据
const handleTimeRange = ref([])

// 日期快捷键
const shortcuts = [
    {
        text: '上周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 7)
            return [start, end]
        },
    },
    {
        text: '上个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 1)
            return [start, end]
        },
    },
    {
        text: '上3个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setMonth(start.getMonth() - 3)
            return [start, end]
        },
    },
]

// 分页
// 当前页码
const currentPage = ref(1);
// 每页显示条数
const pageSize = ref(10);
// 总条数
const total = ref(0);

// 将状态映射提升为常量
const STATUS_MAP = {
    0: { text: '待处理', type: 'info' },
    1: { text: '退货中', type: 'warning' },
    2: { text: '已完成', type: 'success' },
    3: { text: '已拒绝', type: 'danger' }
}

// 初始化
onMounted(() => {
    // 初始化数据
    handleSearch();
})

// 查询搜索
const handleSearch = async () => {
    console.log(search.value);
    
    const result = await refundPageService(search.value)
    console.log(result);
    tableData.value = result.data.list
    total.value = result.data.total
};

// 重置
const handleReset = () => {
    search.value = {};
    applyTimeRange.value = []
    handleTimeRange.value = []
    currentPage.value = 1;
    pageSize.value = 10;
    handleSearch();
};

// 查看详情
const handleDetail = (index, row) => {
    console.log(row);
    // 查看订单逻辑
    router.push(`/admin/order/refund/info/${row.id}`)
};

// 每页显示条数改变
const handleSizeChange = (val) => {
    pageSize.value = val;
    handleSearch()
};

// 当前页码改变
const handleCurrentChange = (val) => {
    currentPage.value = val;
    handleSearch()
};

// 申请日期时间变化
const handleApplyTimeChange = (value) => {
    if (value && value.length === 2) {
        search.value.createDateStart = value[0]
        search.value.createDateEnd = value[1]
    } else {
        search.value.createDateStart = ''
        search.value.createDateEnd = ''
    }
}

// 处理日期时间变化
const handleHandleTimeChange = (value) => {
    if (value && value.length === 2) {
        search.value.handleTimeStart = value[0]
        search.value.handleTimeEnd = value[1]
    } else {
        search.value.handleTimeStart = ''
        search.value.handleTimeEnd = ''
    }
}

</script>



<template>
    <div>
        <!-- 筛选搜索区域 -->
        <el-form :model="search" label-width="100px">
            <el-row :gutter="18">
                <!-- 第一行 -->
                <el-col :span="8">
                    <el-form-item label="输入搜索：">
                        <el-input v-model="search.id" placeholder="服务单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="处理状态：">
                        <el-select v-model="search.status" placeholder="全部" style="width: 100%">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="待处理" value="0"></el-option>
                            <el-option label="退货中" value="1"></el-option>
                            <el-option label="已完成" value="2"></el-option>
                            <el-option label="已拒绝" value="3"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="30">
                    <el-form-item label="操作人员：">
                        <el-input v-model="search.handleMan" placeholder="全部"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <!-- 第二行 -->
                <el-col :span="8">
                    <el-form-item label="申请时间：">
                        <el-date-picker value-format="YYYY-MM-DD" style="width: 100%;" v-model="applyTimeRange"
                            type="daterange" :shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
                            end-placeholder="结束时间" @change="handleApplyTimeChange" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="处理时间：">
                        <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%;"
                            v-model="handleTimeRange" type="datetimerange" :shortcuts="shortcuts" range-separator="To"
                            start-placeholder="开始时间" end-placeholder="结束时间" @change="handleHandleTimeChange" />
                    </el-form-item>
                </el-col>
                <el-col :span="4" style="text-align: right">
                    <el-button type="primary" @click="handleSearch">查询搜索</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- 数据列表区域 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="服务单号" width="180"></el-table-column>

            <!-- 申请时间：使用 createDate 字段 -->
            <el-table-column align="center" prop="createDate" label="申请时间" width="180"></el-table-column>

            <!-- 用户账号：使用 returnName 字段 -->
            <el-table-column align="center" prop="returnName" label="用户账号"></el-table-column>

            <!-- 退款金额：格式化为￥xxx.xx -->
            <el-table-column align="center" label="退款金额">
                <template #default="scope">
                    ￥{{ scope.row.returnAmount.toFixed(2) }}
                </template>
            </el-table-column>

            <!-- 状态：使用 status 字段 -->
            <el-table-column align="center" prop="status" label="申请状态">
                <template #default="scope">
                    <el-tag :type="STATUS_MAP[scope.row.status]?.type">
                        {{ STATUS_MAP[scope.row.status]?.text }}
                    </el-tag>
                </template>
            </el-table-column>

            <!-- 处理时间：使用 handleTime 字段 -->
            <el-table-column align="center" prop="handleTime" label="处理时间"></el-table-column>

            <!-- 操作列 -->
            <el-table-column align="center" fixed="right" label="操作" width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleDetail(scope.$index, scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination style="margin: 3vh 0 0 30%;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
</template>



<style scoped></style>
